<template>
    <div class="nav_view">
        <div class="title">{{ $t('navbar.navigation') }}</div>
        <div class="input_view">
            <el-input v-model="keyword" :placeholder="$t('placeholder.请输入内容')"></el-input>
            <el-button type="primary" @click="query">{{ $t('my.查询') }}</el-button>
        </div>
        <div class="table">
            <el-table :data="tableData" max-height="1250" header-row-class-name="table_header_row"
                header-cell-class-name="table_header_cell" row-class-name="table_row" cell-class-name="table_cell">

                <el-table-column :label="$t('table.地址')" align="center" width="250">
                    <template slot-scope="{row}">
                        <div class="oper_view" @click="router(row)">
                            {{ row.url }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="desc" :label="$t('table.简介')" align="center"></el-table-column>
                <el-table-column prop="date" :label="$t('table.图片')" align="center">
                    <template slot-scope="{row}">
                        <div class="images" @click="previewImage(row.images)">

                            <el-image :src="item" :preview-src-list="row.images" v-for="(item, index) in row.images"
                                :key="`${row.id}_${index}`"></el-image>


                            <!-- <img :src="item" alt="" v-for="(item, index) in row.images" :key="index"> -->
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" align="center" width="100" :label="$t('table.操作')">
                    <template slot-scope="{row}">
                        <div class="oper_view" @click="router(row)">
                            {{ $t('my.更多详情') }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_view">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: "",

            page: 1,
            tableData: [],
            total: 0
        }
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let { list } = await this.$api.usersApi.navList({
                keyword: this.keyword,
                page: this.page,
                page_size: 10
            });
            this.total = list.total;
            this.tableData = list.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        query() {
            this.page = 1;
            this.getList();
        },
        router(item) {
            if (item.url) window.top.open(item.url);
        },

        previewImage(list) {
            console.log(list)
        }
    }
}
</script>
<style lang="scss" scoped>
.nav_view {
    min-width: 100%;
    min-height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 24px;
    box-sizing: border-box;
    background: #FCFCFE;

    .title {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        padding-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .input_view {
        display: flex;
        padding-bottom: 16px;

        &:deep(.el-input__inner) {
            height: 44px;
            background: #F1F7FF;
        }
    }

    .table {
        width: calc(100vw - 572px);

        &:deep(.el-table) {
            height: 100%;
        }
    }

    .oper_view {
        cursor: pointer;
    }

    .images {
        display: flex;

        .el-image {
            width: 52px;
            height: 52px;
            margin-right: 6px;
        }

        // img {
        //     width: 52px;
        //     height: 52px;
        //  margin-right: 6px;
        // }
    }
}
</style>

<style lang="scss">
.nav_view {
    .el-table {
        .table_header_row {
            height: 48px;
            background: #F0F3F6;
        }

        .table_header_cell {
            height: 40px;
            text-align: center;
            font-size: 14px;
            color: #333333;
            background: #F0F3F6;
        }

        .table_cell {
            height: 44px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }
    }
}
</style>